<template>
<transition name="show">
  <div class="articleDetail">
     <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">文章管理</el-breadcrumb-item>
          <el-breadcrumb-item>文章详情</el-breadcrumb-item>
     </el-breadcrumb>
     <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="文章标题*:">
    		<el-input v-model="form.title"></el-input>
  		</el-form-item>
  		<el-form-item label="文章网址*:">
    		<el-input v-model="form.url"></el-input>
  		</el-form-item>
      <el-form-item label="文章优先级:">
        <el-input v-model="form.sort"></el-input>
      </el-form-item>
  		<el-form-item label="文章类型*:">
            <el-select v-model="form.type" placeholder="请选择">
                 <el-option v-for="item in types" :key="item.Types_name" :label="item.Types_name" :value="item.Types_name"></el-option>
            </el-select>
            <el-button size="small" type="primary" class="addImg" @click="isShowItem">{{btn_content}}</el-button>
  		</el-form-item>
      <transition name="el-zoom-in-top">
          <el-form-item label="添加分类:" v-show="isShow">
            <el-input v-model="type"></el-input>
            <el-button size="small" type="primary" class="addimg" @click="addType">添加分类</el-button>
          </el-form-item>
      </transition>
  		<el-form-item label="文章描述*:">
    		<el-input v-model="form.description"></el-input>
  		</el-form-item>
  		<el-form-item label="预览图上传:">
  		    <el-upload class="upload-demo" drag action="/api/upload" multiple :on-success="handleSuccess2">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
  		</el-form-item>
  		<el-form-item label="写文章:" class="spcial">
  		    <quill-editor ref="myTextEditor" v-model="form.content"></quill-editor>
  		    <el-upload class="upload-demo" action="/api/upload" :on-success="handleSuccess">
                <el-button size="small" type="primary">图片上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
  		</el-form-item>
  		<el-form-item label="">
               <el-button type="primary" class="btn_height" @click="submit">提交<i class="el-icon-upload el-icon--right"></i></el-button>
        </el-form-item>
     </el-form>
  </div>
</transition>
</template>

<script>
import { quillEditor } from 'vue-quill-editor';

export default {
  data () {
    return {
           type:'',
           isShow:false,
           btn_content:'添加分类',
           alert:{
               title:'提示',
               content:''
           },
           form:{
               title:'',
               description:'',
               url:'',
               type:'',
               content:'',
               imgUrl:'',
               sort:0,
               preContent:''
           },
           types:[],
        }
    },
    computed:{
            editor() {
                return this.$refs.myTextEditor.quillEditor;
            },
            otherCotent(){
            	return this.form.content;
            },
    },
    mounted(){
         this.formInit();
    },
    components:{
        quillEditor,
    },
    methods:{
        async formInit(){
             let res = await this.axios.get('/api/article/findAllType');
             this.types = res.data.message;
             let formData = await this.axios.post('api/article/findArticleByTitle',{title:this.$route.params.url});
             this.Initform(formData.data.message[0]);
        },
        isShowItem(){
             this.isShow=!this.isShow;
             if(this.isShow)
             this.btn_content='收起分类'
             else
             this.btn_content='添加分类' 
        },
        onEditorChange({ editor, html, text }) {
             this.form.content = html;
             console.log(text);
        },
        Initform(form){
             this.form.title = form.Article_title;
             this.form.description = form.Article_description;
             this.form.url = form.Article_url;
             this.form.type = form.Article_type;
             this.form.content = form.Article_content;
             this.form.imgUrl = form.Article_imgUrl;
             this.form.sort = form.Article_sort;
        },
        async submit(){
             this.form.preContent=this.$refs.myTextEditor.quill.getText(0,150);
             let res = await this.axios.post('/api/article/updateArticleByTitle',this.form);
             this.alert.content = res.data.message;
             if(res.data.status == 1){
                  this.$alert(this.alert.content, this.alert.title, {
                        confirmButtonText: '确定'
                  });
                  this.formInit();
             }
        },
        async addType(){
            let res = await this.axios.post('/api/article/addType',{type:this.type});
            if(res.data.status==1){
                this.$alert('成功插入类型', this.alert.title, {
                        confirmButtonText: '确定'
                });
                this.isShowItem();
                this.type='';
                this.formInit();
            }
        },
        handleSuccess(response, file, fileList){
            this.form.content+="<img src='http://47.104.28.13:3000/images/"+file.name+"'>";
        },
        handleSuccess2(response, file, fileList){
        	this.form.imgUrl=file.name;
        	console.log(this.form.img_url);
        }
    },
}
</script>


<style lang="stylus" scoped>
.show-enter-active
  transition: all .4s ease;
.show-leave-active
  transition: all 0 ease-out;
.show-enter, .show-leave-active
  transform: translateX(350px);
  opacity: 0;
.addImg
  margin-left 20px
.ql-container
	min-height 300px
.btn_height
	width 300px 	
.articleDetail
	flex 1
	padding 25px 70px
	height 30px
	overflow-y scroll
	.spcial
		width 1000px
	.el-breadcrumb
		margin-bottom 22px
	.el-form
		width 550px
			
</style>
